<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程图展示</title>
    <script src="https://unpkg.com/@dreamof2080/flow-view"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
<!--    <script src="../js/dreamof2080-flow-view.js"></script>-->
    <link rel="stylesheet" href="./mxgraph/css/common.css">
    <style>
        body {
            margin: 0;
        }
        #container {
            width: 100%;
            height: 100vh;
            background-color: #000000cf;
            opacity: 0.8;
            overflow: hidden;
        }

        #thumbnail {
            position: absolute;
            overflow: hidden;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 140px;
            background: rgb(191, 191, 191);
            opacity: 0.8;
        }
        #nodeInfo {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: #000000;
            opacity: 0.8;
            display: none;
            border-radius: 5px;
        }
        #nodeInfo p {
            font-size: 12px;
            color: #FFFFFF;
            margin-left: 20px
        }
        .version {
            position: absolute;
            left: 0;
            top: 0;
            color: #e2dbdb;
            padding: 5px;
            z-index: 10;
        }
        /*水流效果*/
        .edge-flow-style {
            stroke-dasharray: 8;
            animation: dash 0.5s linear;
            animation-iteration-count: infinite;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: -16;
            }
        }
    </style>
</head>
<body>
<div class="version">
    <span>当前版本：V1</span>
</div>
<div id="container">

</div>
<div id="thumbnail">

</div>
<div id="nodeInfo">
    <p>未查看：<span id="node-unview">11</span></p>
    <p>未提交：<span id="node-unsubmit">11</span></p>
    <p>已提交：<span id="node-submitted">11</span></p>
</div>

<script>
    // 流程图器div
    const container = document.getElementById('container')
    // 流程图缩略图容器div
    const thumbnail = document.getElementById('thumbnail');
    // 节点操作者信息弹出div
    const nodeInfo = document.getElementById('nodeInfo');

//     const data = `
//   <mxGraphModel>
//   <root>
//     <mxCell id="new-c9d0fa5b-9185-4a7a-9030-7c218b78a715" />
//     <mxCell id="new-6a8e7900-803c-4029-b375-46aec3e77485" parent="new-c9d0fa5b-9185-4a7a-9030-7c218b78a715" />
//     <mxCell id="7123896674301624320" value="开始" style="startContainer" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" vertex="1">
//       <mxGeometry x="140" y="190" width="120" height="70" as="geometry" />
//     </mxCell>
//     <mxCell id="new-7a50c438-6d97-496a-aac7-120348755745" value="1.申请人" style="startContent" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" vertex="1" connectable="0">
//       <mxGeometry y="28" width="120" height="40" as="geometry" />
//     </mxCell>
//     <mxCell id="7123908116094500864" value="审批" style="activityContainer" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" vertex="1">
//       <mxGeometry x="430" y="90" width="120" height="70" as="geometry" />
//     </mxCell>
//     <mxCell id="new-46f3e884-3c4e-4262-9b41-405e5b1e6c30" value="tmu经理" style="activityContent" parent="7123908116094500864" vertex="1" connectable="0">
//       <mxGeometry y="28" width="120" height="40" as="geometry" />
//     </mxCell>
//     <mxCell id="7123908116094500865" value="" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" source="7123896674301624320" target="7123908116094500864" edge="1">
//       <mxGeometry relative="1" as="geometry" />
//     </mxCell>
//     <mxCell id="7123913751091593216" value="结束" style="endContainer" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" vertex="1">
//       <mxGeometry x="800" y="210" width="120" height="70" as="geometry" />
//     </mxCell>
//     <mxCell id="new-5aa86678-ec0f-4d1f-90c4-3ff13beb0f13" value="0.归档" style="endContent" parent="7123913751091593216" vertex="1" connectable="0">
//       <mxGeometry y="28" width="120" height="40" as="geometry" />
//     </mxCell>
//     <mxCell id="7123913751091593217" value="" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" source="7123908116094500864" target="7123913751091593216" edge="1">
//       <mxGeometry relative="1" as="geometry" />
//     </mxCell>
//     <mxCell id="7123996592420798464" value="审批" style="activityContainer" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" vertex="1">
//       <mxGeometry x="430" y="330" width="120" height="70" as="geometry" />
//     </mxCell>
//     <mxCell id="new-cf07b7ee-5944-4133-bd37-fb448bba7254" value="直接上级" style="activityContent" parent="7123996592420798464" vertex="1" connectable="0">
//       <mxGeometry y="28" width="120" height="40" as="geometry" />
//     </mxCell>
//     <mxCell id="7123996592420798465" value="" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" source="7123896674301624320" target="7123996592420798464" edge="1">
//       <mxGeometry relative="1" as="geometry" />
//     </mxCell>
//     <mxCell id="7123998344767455232" value="" parent="new-6a8e7900-803c-4029-b375-46aec3e77485" source="7123996592420798464" target="7123913751091593216" edge="1">
//       <mxGeometry relative="1" as="geometry" />
//     </mxCell>
//   </root>
// </mxGraphModel>
//     `




    let url = window.location.href;
    let pid = url.slice(url.indexOf('?')+4);

    $.ajax({
        type: "GET",
        url: "/proc/getPicById2",
        data: {"id":pid},
        dateType: "json",
        success: function (res) {
            console.log(res)
            let data = res.mxGraphXml;
            let currentIds = res.currentIds
            let flowedEdgeIds = res.flowedEdgeIds
            // 初始化流程图
            const graph = flowView.initFlowGraph({
                container,
                shadowColor: '#050505',
                flowedEdgeColor: '#525050',
                // 节点点击事件
                onClick: (id, left, top) => {
                    nodeInfo.style.display = id ? 'block' : 'none'
                    nodeInfo.style.left = left + 'px'
                    nodeInfo.style.top = top + 'px'
                    // 根据ID调用接口查询节点操作者信息
                    // --todo
                    $.ajax({
                        type: "GET",
                        url: "/proc/getAssigneeByCondition",
                        data: {"nodeId": id,
                        "procInsId":pid},
                        dateType: "json",
                        success: function (res) {
                          $("#node-unview").text(res);
                          $("#node-submitted").text(res);
                          $("#node-unsubmit").text(res);
                        }
                    });
                },
                thumbnail
            });
            // 渲染流程图
            flowView.renderFlowGraph({
                graph,
                 data
                ,
                currentIds: currentIds,
                flowedEdgeIds: flowedEdgeIds,//看名称明显是线id
            })
        }
    });


</script>
</body>
</html>
